Efecto polaroid con CSS

• 

En ZURB explican los pasos a seguir para crear una galería tipo polaroid como la que ellos han creado. Lo bueno que tiene es que está creada con CSS y lo malo que el efecto se pierde si utilizamos Explorer. Aún así aunque pierda el efecto no deja de ser original y no me resistí a probar, estuve jugando un rato para adaptar la idea a modo de menú en la cabecera de un blog. Si te animas lo que hice fue lo siguiente:

En plantilla edición de HTML y justo antes de </head>añadí el contenido de este archivo al que modifiqué la parte correspondiente a margin para que las imágenes quedaran centradas ya que está creado con la idea como decía de una galería con cuatro imágenes en cada línea.

Luego, en plantilla de diseño editamos un gadget en la parte del crosscol añadimos las imágenes:

<ul class="polaroids">

<li><a href="url-enlace" title="Texto-a-mostrar">

<img src="url-imagen" width="150" height="170" alt="Título" /></a></li>

<li><a href="url-enlace" title="Texto-a-mostrar">

<img src="url-imagen" width="250" height="170" alt="Título" /></a></li>

<li><a href="url-enlace" title="Texto-a-mostrar">

<img src="url-imagen" width="150" height="171" alt="Título" /></a></li>

</ul>

Y eso es todo. El resultado sería más o menos como el de la siguiente imagen con el efecto en cada una de las fotografías polaroid.